/** * @description: 全局公共筛选（首页和五困生页面筛选条件不同，其余页面相同） */
<template>
  <van-action-sheet v-model="show" class="action-sheet-box" @click-overlay="closeClick">
    <div class="header">
      <span>筛选 </span>
      <van-icon name="cross" @click="closeClick" />
    </div>

    <div class="content">
      <p>选择时间</p>
      <div class="time-range-box">
        <span v-for="(item, index) of chooseTimeList" :key="index" :class="[chooseTimeActive === index ? 'active' : '']" @click="timeClick(index)">
          {{ item.text }}
        </span>
      </div>

      <!-- 自定义日期范围 -->
      <div class="date-choose-box" v-if="chooseTimeActive === 5">
        <Calendar ref="Calendar" @dataRange="dataRange" />
      </div>

      <!-- 五困生页面选择五困生类型 -->
      <div v-if="fiveHardTPathList.includes(this.$route.path)">
        <p>选择五困生类型</p>
        <div class="time-range-box">
          <span
            v-for="(item, index) of fiveHardTypeList"
            :key="index"
            :class="[fiveHardTypeAcitve === index ? 'active' : '']"
            @click="fiveHardType(index, item.value)"
          >
            {{ item.text }}
          </span>
        </div>
      </div>

      <!-- 首页选择学院 -->
      <div v-if="this.$route.path === '/home'">
        <p class="select-title">选择学院</p>
        <Select ref="collegeSelect" class="mt15" :columns="collegeColumns" type="college" @selectConfirm="selectConfirm" placeholder="请选择学院" />
      </div>

      <!-- 首页选择年级-->
      <div v-if="this.$route.path === '/home'">
        <p class="select-title">选择年级</p>
        <Select ref="yearSelect" class="mt15" :columns="yearColumns" type="year" @selectConfirm="selectConfirm" placeholder="请选择年级" />
      </div>

      <!-- 首页选择年级-->
      <div v-if="this.$route.path === '/home'">
        <p class="select-title write-title">填写班级</p>
        <div class="custom-field-wrapper">
          <input type="text" v-model="className" class="custom-field" placeholder="请输入班级名称" />
        </div>
      </div>
    </div>

    <div class="bottom">
      <van-button round @click="resetClick">重置</van-button>
      <van-button round @click="confirmClick" type="info" color="#2E6CF6">确定</van-button>
    </div>
  </van-action-sheet>
</template>

<script>
import moment from 'moment'
import Calendar from '@/components/Calendar'
import Select from '@/components/Select'
import { teachingTime } from '@/api/common'
export default {
  name: 'FiveHardSearch',
  components: { Calendar, Select },
  data() {
    return {
      show: false,
      chooseTimeList: [
        { text: '本周', value: 0 },
        { text: '上周', value: 1 },
        { text: '本月', value: 2 },
        { text: '上月', value: 3 },
        { text: '本学期', value: 4 },
        { text: '自定义', value: 5 },
      ],
      //   五困生筛选
      fiveHardTypeList: [
        { text: '全部', value: '' },
        { text: '行为', value: '7' },
        { text: '心理', value: '1' },
        { text: '学业', value: '2' },
        { text: '经济', value: '3' },
        { text: '思想', value: '6' },
      ],
      //学院下拉
      collegeColumns: ['学生处（学生工作部）', '水利与环境工程学院', '经济与管理学院 '],
      // 年级下拉
      yearColumns: ['2023', '2022', '2021', '2020', '2019'],
      chooseTimeActive: 0, //选中-选择时间
      fiveHardTypeAcitve: 0, //选中-五困生类型

      className: undefined, //班级名称
      collegeVal: undefined, //学院-选中值
      yearVal: undefined, //年级-选中值
      startDate: undefined, //开始时间
      endDate: undefined, //结束时间
      sign: undefined, //五困生类型

      fiveHardTPathList: ['/fiveHard', '/collegeMsg', '/gradeMsg', '/instructorMsg'], //需要显示五困生筛选的页面
    }
  },
  methods: {
    openActionSheet() {
      this.show = true
    },

    //选中的的日期范围
    dataRange(startDate, endDate) {
      this.startDate = startDate
      this.endDate = endDate
    },

    //筛选-触发选择时间
    timeClick(val) {
      this.chooseTimeActive = val
    },

    //筛选-选择五困生类型
    fiveHardType(index, val) {
      this.sign = val
      this.fiveHardTypeAcitve = index
    },

    //下拉选中值
    selectConfirm(val, type) {
      if (type === 'college') {
        this.collegeVal = val
      } else {
        this.yearVal = val
      }
    },

    //确定
    confirmClick() {
      if (this.chooseTimeActive === 0) {
        //本周
        let weekOfDay = parseInt(moment().format('E')) //计算今天是这周第几天
        this.startDate = moment(
          moment()
            .startOf('day')
            .subtract(weekOfDay - 1, 'days')
            .toDate()
        ).format('YYYY-MM-DD')
        this.endDate = moment(
          moment()
            .startOf('day')
            .subtract(weekOfDay - 7, 'days')
            .toDate()
        ).format('YYYY-MM-DD')
      } else if (this.chooseTimeActive === 1) {
        //上周
        const today = moment().startOf('week') // 获取本周的起始日期
        this.startDate = moment(
          today
            .clone()
            .subtract(1, 'week')
            .startOf('week')
            .add(1, 'day')
        ).format('YYYY-MM-DD')
        this.endDate = moment(
          today
            .clone()
            .subtract(1, 'week')
            .endOf('week')
            .add(1, 'day')
        ).format('YYYY-MM-DD')
      } else if (this.chooseTimeActive === 2) {
        //本月
        this.startDate = moment(
          moment()
            .month(moment().month())
            .startOf('month')
            .valueOf()
        ).format('YYYY-MM-DD')
        this.endDate = moment(
          moment()
            .month(moment().month())
            .endOf('month')
            .valueOf()
        ).format('YYYY-MM-DD')
      } else if (this.chooseTimeActive === 3) {
        //上月
        this.startDate = moment(
          moment()
            .month(moment().month() - 1)
            .startOf('month')
            .valueOf()
        ).format('YYYY-MM-DD')
        this.endDate = moment(
          moment()
            .month(moment().month() - 1)
            .endOf('month')
            .valueOf()
        ).format('YYYY-MM-DD')
      } else if (this.chooseTimeActive === 4) {
        teachingTime().then(res => {
          let data = res.data.data
          this.startDate = data[0].nyr
          this.endDate = data[data.length - 1].nyr
        })
      }

      setTimeout(() => {
        if (this.fiveHardTPathList.includes(this.$route.path)) {
          //五困生统计
          this.$bus.emit('fiveHardDbs', this.startDate, this.endDate, this.sign)
        } else if (this.$route.path === '/warningStu') {
          //预警学生
          this.$bus.emit('warningStuDbs', this.startDate, this.endDate)
        }
        this.closeClick()
      }, 500)
    },

    //重置
    resetClick() {
      this.chooseTimeActive = 0
      this.fiveHardTypeAcitve = 0
      this.startDate = undefined
      this.endDate = undefined
      this.sign = undefined
      this.className = undefined
      this.collegeVal = undefined
      this.yearVal = undefined
      //  this.$refs['collegeSelect'].value = ''
      // this.$refs['yearSelect'].value = ''
    },

    //关闭
    closeClick() {
      this.show = false
      this.chooseTimeActive = 0
      this.fiveHardTypeAcitve = 0
    },
  },
}
</script>

<style lang="scss" scoped>
.action-sheet-box {
  padding-bottom: 20px;
  @include scrollY();
}
.header {
  height: 55px;
  @include fcb();
  padding: 0 12px;
  font-size: $fz16;
  color: #333333;
  font-weight: bold;
  border-bottom: 1px solid #e7eaf0;
}

.content {
  min-height: 350px;
  @include scrollY();
  padding: 0 12px;
  border-bottom: 1px solid #e7eaf0;
  padding-bottom: 30px;
  p {
    font-size: $fz16;
    color: #333333;
    margin: 21px 0 13px;
  }
  .time-range-box {
    @include fcb();
    flex-wrap: wrap;
    span {
      display: inline-block;
      font-size: $fz14;
      width: 110px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: #f6f6f6;
      border-radius: 18px;
      border: 1px solid transparent;
    }
    span:nth-child(n + 3) {
      margin-top: 10px;
    }
  }
  .date-choose-box {
    @include fcb();
    margin-top: 10px;
    margin-bottom: 30px;
    .van-cell {
      width: 45%;
      background: #f6f6f6;
      border-radius: 18px;
      ::v-deep {
        .van-field__control {
          text-align: center;
          height: 18px;
          line-height: 18px;
        }
      }
    }
    span {
      font-weight: normal;
      font-size: $fz12;
    }
  }
}

.active {
  background: #e9f0fe !important;
  color: #2e6cf6 !important;
  border-color: #2e6cf6 !important;
}

.bottom {
  @include fcb();
  padding: 20px 12px 0;
  .van-button {
    width: 165px;
  }
}
.custom-field-wrapper {
  position: relative;
  .custom-field {
    height: 36px;
    line-height: 36px;
    background: #f6f6f6;
    border-radius: 20px;
    outline: none;
    border: none;
    width: 100%;
    font-size: $fz14;
    padding: 0 20px;
  }
  .van-icon {
    position: absolute;
    top: 22px;
    right: 20px;
  }
}
::v-deep .van-field__control::-webkit-input-placeholder {
  color: #97979f;
  font-size: $fz14;
}
</style>
